<template>
  <view class="container">
    <!-- 1.搜索框 -->
    <searchInput></searchInput>
    <!-- 2.轮播图 -->
    <swiper class="swiperBox" autoplay circular indicator-dots>
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <image :src="item.image_src" mode="widthFix" />
      </swiper-item>
    </swiper>

    <!-- 3.导航栏 -->
    <view class="navBox">
      <navigator class="navItem" v-for="(item,index) in navList" :key="index">
        <image :src="item.image_src" mode="widthFix" />
      </navigator>
    </view>

    <!-- 4.楼层栏 -->
    <view class="floorBox">
      <!-- 楼层标题 -->
      <view class="floorTitle" v-for="(item,index) in floorList" :key="index">
        <image :src="item.floor_title.image_src" mode="widthFix" />
        <!-- 楼层内容 -->
        <view class="floorContent">
          <navigator v-for="(itema,index) in item.product_list" :key="index">
            <image :src="itema.image_src" :mode="index===0?'widthFix':'scaleToFill'" />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import searchInput from "../../components/searchInput";
export default {
  components: {
    searchInput
  },
  data() {
    return {
      //轮播图数据
      swiperList: [],
      //导航栏数据
      navList: [],
      //楼层栏数据
      floorList: []
    };
  },
  //微信生命周期函数--监听页面加载
  async onLoad() {
    //获取数据加载
    uni.showLoading({
      title: "加载中",
      mask: true
    });
    //1.获取轮播图数据
    // this.getSwiper();
    //2.获取导航栏数据
    // this.getNav();
    //3.获取楼层栏数据
    // this.getFloor();
    Promise.all([this.getSwiper(), this.getNav(), this.getFloor()]).then(() => {
      uni.hideLoading();
    });
  },

  //方法
  methods: {
    //1.获取轮播图数据
    getSwiper() {
      return uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
        })
        .then(res => {
          this.swiperList = res[1].data.message;
          console.log(res);
        });
    },
    //2.获取导航栏数据
    getNav() {
      return uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
        })
        .then(res => {
          console.log(res);
          this.navList = res[1].data.message;
        });
    },
    //3.获取楼层栏数据
    getFloor() {
      return uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"
        })
        .then(res => {
          console.log(res);
          this.floorList = res[1].data.message;
        });
    }
  }
};
</script>

<style lang='scss'>
//1.轮播图
.swiperBox {
  height: 340rpx;
}
//2.导航栏
.navBox {
  display: flex;
  .navItem {
    padding: 20rpx;
    flex: 1;
  }
}
//3.楼层栏
.floorBox {
  // width: 750rpx;
  .floorTitle {
    .floorContent {
      overflow: hidden;
      navigator {
        float: left;
        width: 33.3%;
        border: 4rpx solid #fff;
      }
      navigator:nth-last-child(-n + 4) {
        height: 208rpx;
        image {
          height: 100%;
        }
      }
    }
  }
}
</style>